<template>
  <header class="header">
    <h1>todos</h1>
   
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="chkAll" />
    <label for="toggle-all"></label>
    <!-- 
      键盘事件（keyup、keydown、keypress）也有修饰符
        .enter

        @keyup.键名
        用的最多的就是enter代表回车触发
     -->
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      v-model.trim="task"
      @keyup.enter="add"
    />
  </header>
</template>

<script>
export default {
  props: ['list'],
  data() {
    return {
      task: ''
    }
  },
  computed: {
    chkAll: {

      get () {
        // 都是true，返回true，有一个是false返回false
        return this.list.every(v => v.isDone)
      },

      set (val) {

        // 全选是true就让所有小选是true，全选是false就让所有小选都是false
        this.list.forEach(v => v.isDone = val)
      }
    }
  },
  methods: {
    add () {
      // 1. 非空判断
      if (this.task === '') return alert('请输入任务内容')

      // 2. 把输入的内容加到数组里，但是数组在父组件里，不能直接改父组件
      // 所以要子传父，子通知父
      this.$emit('add', this.task)

      // 3. 清空输入内容
      this.task = ''
    }
  }
}
</script>